<template>
  <div id="achievement" class="container">
    <table-filter>
       <el-select v-model="apiSetting.data.examId" clearable filterable default-first-option clear placeholder='请选择考试'>
				<el-option v-for="item in examOptions" :key="item.examId" :label="item.examName" :value="item.examId"></el-option>
			</el-select>
      <el-input
          v-model="apiSetting.data.userName"
          placeholder="请输入学生姓名"
          clearable
      />
      <el-date-picker
          v-model="timeLimit"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
      />
      <el-button plain type="warning" @click="search">查询</el-button>
      <el-button plain type="primary" @click="exportExamHistory"
      >导出考试记录
      </el-button>
    </table-filter>
    <data-table ref="dtb" pagination :api-setting="apiSetting">
      <el-table-column
          fixed
          prop="userName"
          label="考生姓名"
          show-overflow-tooltip
      />
      <el-table-column prop="examName" label="考试名称" show-overflow-tooltip/>
      <el-table-column width="100" prop="state" label="状态">
        <template slot-scope="{ row: { state } }">
          <el-tag :type="examState[state].type" effect="dark">
            {{ examState[state].label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="score" label="得分"/>
      <el-table-column prop="organizeName" label="班级" show-overflow-tooltip/>
      <el-table-column prop="deptName" label="院系" show-overflow-tooltip/>
      <el-table-column prop="schooleName" label="学校" show-overflow-tooltip/>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="{ row }" v-if="row.state===1">
          <el-button
              @click="viewPaper(row)"
              type="text"
              class="warning"
              size="small"
          >查卷
          </el-button>
          <el-button @click="exportExcel(row)" type="text" size="small"
          >导出题目
          </el-button>
          <el-button @click="exportExcel(row, true)" type="text" size="small"
          >导出错题
          </el-button>
        </template>
      </el-table-column>
    </data-table>
    <view-paper
        ref="viewPaper"
        @export-excel="exportExcel"
        :show.sync="showViewDialog"
    ></view-paper>
  </div>
</template>

<script>
import dtb from "@/mixins/refs/dtb";
import ViewPaper from "./viewPaper";
import selectTime from "../../../mixins/business/selectTime";
import examState from "../../../mixins/business/examState";
import tbSearch from "@/mixins/dataTable/tbSearch";

export default {
  name: "index",
  components: {ViewPaper},
  mixins: [tbSearch, dtb, selectTime, examState],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/scoremanage/getScoreManage",
        data: {
          beginTime: "",
          endTime: "",
          userName: "",
          examId:''
        }
      },
      showViewDialog: false,
      viewPaperDialog: null,
      examOptions: null
    };
  },
  created(){
    this.axios.get('/sys/scoremanage/getAllExamList')
    .then(res => {
      this.examOptions = res
    })
  },
  mounted() {
    this.viewPaperDialog = this.$refs.viewPaper;
  },
  methods: {
    exportExcel(paper, isCorrect = false) {
      const {userId, examId, upid} = paper;
      this.downLoadFile(
          {
            method: "post",
            url: "/sys/scoremanage/exportStudentQuestionExcel",
            data: {
              examId,
              userId,
              upid,
              isCorrect,
              cols: [
                "title",
                "options",
                "userChoice",
                "rightAnswer",
                "isCorrect",
                "chapterName",
                "subName"
              ]
            }
          },
          `${userId}_${examId}.xls`
      );
    },
    exportExamHistory() {
      this.downLoadFile(
          {
            method: "post",
            url: "/sys/scoremanage/exportStudentInfoExcel",
            data: {
              cols: ["userName", "examName", "score", "organizeName", "deptName"],
              examId: this.apiSetting.data.examId
            }
          },
          "试卷记录.xls"
      );
    },
    viewPaper(paper) {
      const {upid, examId, userId, userName} = paper;
      this.showViewDialog = true;
      this.viewPaperDialog.$data.stuName = userName;
      this.viewPaperDialog.setParams({examId, userId, upid});
    }
  }
};
</script>

<style scoped></style>
